<template>
  <div class="detail">
    <!-- 头部 -->
    <header>
      <i class="iconfont icon-arrow-left" @click="goBack"></i>
      <h3>食谱详情</h3>
    </header>
    <!-- 菜谱封面 -->
    <div class="fengmian">
      <img :src="content.coverImg" />
      <i class="iconfont icon-aixin1" @click="showPopup"></i>
    </div>
    <!-- 收藏弹出 -->
    <van-popup v-model="show" position="bottom" round>
      <div class="head">
        <h3>收藏到</h3>
        <p>请选择将此菜谱收藏到哪个文件夹</p>
      </div>
      <div class="collect" @click="collectAction">
        <div
          class="collect-item"
          v-for="(item, index) in list"
          :key="index"
          @click="addAction(item.collect_name)"
        >
          <p>{{ item.collect_name }}</p>
        </div>
      </div>
    </van-popup>
    <div class="details">
      <!-- 菜谱标题 -->
      <p class="title">{{ content.title }}</p>
      <!-- 菜谱的信息 -->
      <div class="msg">
        <div>
          <i class="iconfont icon-31shijian"></i>
          <span>时间</span>
          <span>{{ content.cookingTime }}</span>
        </div>
        <div>
          <i class="iconfont icon-shoucang"></i>
          <span>难度</span>
          <span>{{ content.difficulty }}</span>
        </div>
        <div>
          <i class="iconfont icon-aixin"></i>
          <span>收藏</span>
          <span>2123人</span>
        </div>
      </div>
      <!-- 发布菜谱的用户的信息 -->
      <div class="userInfo" v-if="flag === false">
        <div class="info">
          <!-- 头像 -->
          <img @click="goAction" :src="userInfo.avatar" />
          <div>
            <!-- 用户名 -->
            <p>{{ userInfo.user_name }}</p>
            <!-- 性别 -->
            <span>{{ userInfo.sex }}</span>
            <!-- 注册年份 -->
            <span>{{ userInfo.registerDate }}加入</span>
          </div>
          <button @click="guanzhuAction" v-if="follow === false" class="btn1">
            <i class="iconfont icon-jiajianzujianjiahao"></i>关注
          </button>
          <button @click="cancelAction" v-if="follow === true" class="btn2">
            已关注
          </button>
        </div>
        <div class="works_wrap">
          <div class="works">
            <div class="works_item">
              <img
                src="https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u132.png"
              />
              <p>黑森林巧克力蛋糕</p>
              <p><span>10-15分钟</span><span>零厨艺</span></p>
            </div>
            <div class="works_item">
              <img
                src="https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u132.png"
              />
              <p>黑森林巧克力蛋糕</p>
              <p><span>10-15分钟</span><span>零厨艺</span></p>
            </div>
            <div class="works_item">
              <img
                src="https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u132.png"
              />
              <p>黑森林巧克力蛋糕</p>
              <p><span>10-15分钟</span><span>零厨艺</span></p>
            </div>
            <div class="works_item">
              <img
                src="https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u132.png"
              />
              <p>黑森林巧克力蛋糕</p>
              <p><span>10-15分钟</span><span>零厨艺</span></p>
            </div>
            <div class="works_item">
              <img
                src="https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u132.png"
              />
              <p>黑森林巧克力蛋糕</p>
              <p><span>10-15分钟</span><span>零厨艺</span></p>
            </div>
          </div>
        </div>
      </div>
      <!-- 菜谱的内容 -->
      <div class="content">
        <!-- 食材 -->
        <div class="food">
          <h3>用料</h3>
          <div v-for="(item, index) in content.material" :key="index">
            <span>{{ item.title }}</span>
            <span>{{ item.con }}</span>
          </div>
        </div>
        <!-- 步骤 -->
        <div class="buzhouContent">
          <div class="buzhou" v-for="(item, index) in step" :key="index">
            <h3>步骤{{ index + 1 }}</h3>
            <img :src="item.url" />
            <p>{{ item.title }}</p>
          </div>
        </div>
        <!-- 评论 -->
        <div class="discuss">
          <h3><span>大家评价</span><span>(6)</span></h3>
          <div class="user-me">
            <img
              src="https://cdn7.axureshop.com/demo/1934191/images/%E9%A3%9F%E8%B0%B1%E8%AF%A6%E6%83%85/u865.png"
            />
            <input type="text" placeholder="留下你的精彩评论" />
          </div>
          <div class="user">
            <div class="info">
              <div class="left">
                <img
                  src="https://cdn7.axureshop.com/demo/1934191/images/%E9%A3%9F%E8%B0%B1%E8%AF%A6%E6%83%85/u865.png"
                />
                <div>
                  <p>西瓜</p>
                  <p>11-20</p>
                </div>
              </div>
              <div class="right">
                <i class="iconfont icon-aixin"></i>
                <span>122</span>
              </div>
            </div>
            <div class="text">
              <p>哇，看着好好吃的样子～</p>
            </div>
          </div>
          <div class="user">
            <div class="info">
              <div class="left">
                <img
                  src="https://cdn7.axureshop.com/demo/1934191/images/%E9%A3%9F%E8%B0%B1%E8%AF%A6%E6%83%85/u865.png"
                />
                <div>
                  <p>西瓜</p>
                  <p>11-20</p>
                </div>
              </div>
              <div class="right">
                <i class="iconfont icon-aixin"></i>
                <span>122</span>
              </div>
            </div>
            <div class="text">
              <p>哇，看着好好吃的样子～</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { findCollectApi, putIntoCollectApi } from "@/api/collect";
import { RecipeIdApi, findUserApi, liulanApi } from "@/api/detail";
import { findConcernApi, addConcernApi, cancelConcernApi } from "@/api/concern";
import { nextTick } from "vue";
export default {
  created() {
    this.detailAction();
    this.findUser();
    this.liulan();
  },
  data() {
    return {
      // 收藏弹出框
      show: false,
      // 关注
      follow: "",
      // 收藏夹列表
      list: [],
      // 菜谱内容
      content: "",
      // 发布菜谱的用户的信息
      userInfo: [],
      // 登录用户与发布菜谱用户是否为同一人
      flag: "",
      // 菜谱步骤
      step: "",
    };
  },
  methods: {
    goBack() {
      // 返回点击进来前的页面
      this.$router.back();
    },
    async showPopup() {
      this.show = true;
      try {
        let res = await findCollectApi();
        this.list = res.data.data;
      } catch (error) {}
    },
    // 弹出收藏页面
    collectAction() {
      Toast({
        message: "已收藏",
        icon: "success",
      });
      this.show = false;
    },
    // 加关注
    async guanzhuAction() {
      // this.follow = true;
      Toast({
        message: "关注成功",
        icon: "success",
      });

      try {
        const type = 1;
        let res = await addConcernApi({
          user_idb: this.userInfo._id,
          type: type,
        });
        this.follow = res.data.concern;
        console.log(res);
        console.log(this.follow);
      } catch (error) {}
    },
    // 取消关注
    async cancelAction() {
      // this.follow = false;
      Toast({
        message: "取消关注",
        icon: "success",
      });
      try {
        let res = await cancelConcernApi({
          user_idb: this.userInfo._id,
        });
        this.follow = res.data.concern;
        console.log(res);
        console.log(this.follow);
      } catch (error) {}
    },
    // 去到发布菜谱的用户的个人中心
    goAction() {
      this.$router.push("/otheruser");
    },
    // 请求菜谱的数据
    async detailAction() {
      try {
        let res = await RecipeIdApi({
          recipe_id: this.$route.params.recipe_id,
        });
        this.content = { ...res.data.data[0] };
        this.flag = res.data.flag;
        this.step = this.content.step[0].data;
      } catch (error) {}
    },
    // 将菜谱添加收藏夹
    async addAction(collect_name) {
      try {
        await putIntoCollectApi({
          recipe_id: this.$route.params.recipe_id,
          collect_name: collect_name,
        });
      } catch (error) {}
    },
    // 查找发布菜谱的用户信息
    async findUser() {
      try {
        let res = await findUserApi({
          recipe_id: this.$route.params.recipe_id,
        });
        this.userInfo = res.data.data[0].user_id || {avatar:'https://cdn7.axureshop.com/demo/1934191/images/%E6%90%9C%E7%B4%A2%E7%BB%93%E6%9E%9C/u399.png',user_name:'西瓜',sex:'女',registerDate:'2023年加入'};
        this.checkConcern();
      } catch (error) {}
    },
    // 检查是否关注
    async checkConcern() {
      try {
        let res = await findConcernApi({
          user_idb: this.userInfo._id,
        });
        this.follow = res.data.concern;
        console.log(res);
        console.log(this.follow);
      } catch (error) {}
    },
    // 记录浏览数据
    async liulan() {
      const time = new Date().getTime();
      try {
        let res = await liulanApi({
          user_id: this.userInfo._id,
          liulan_time: time,
        });
      } catch (error) {}
    },
  },
};
</script>

<style scoped lang="scss">
header {
  height: 50px;
  line-height: 50px;

  i {
    font-size: 18px;
    position: absolute;
    left: 20px;
  }

  h3 {
    text-align: center;
    font-weight: 700;
  }
}

.fengmian {
  width: 375px;
  height: 355px;
  position: relative;

  img {
    width: 100%;
    height: 100%;
  }

  i {
    position: absolute;
    top: 20px;
    right: 10px;
    color: rgb(216, 83, 83);
    font-size: 20px;
    background-color: #fff;
    border-radius: 50%;
    padding: 10px;
  }
}

.details {
  width: calc(100% - 40px);
  height: 500px;
  background-color: #fff;
  position: absolute;
  top: 380px;
  border-radius: 30px 30px 0 0;
  padding: 30px 20px;

  .title {
    font-size: 18px;
    line-height: 28px;
  }

  .msg {
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    line-height: 28px;
    padding-bottom: 10px;

    div {
      width: 45%;

      i {
        padding-right: 5px;
      }

      span {
        padding-right: 5px;

        &:last-child {
          font-size: 12px;
          color: #999;
        }
      }
    }
  }

  .userInfo {
    border-top: 1px solid #ccc;

    .info {
      display: flex;
      padding: 20px 0;

      img {
        width: 46px;
        height: 46px;
        padding: 0 10px;
      }

      div {
        width: 60%;
        align-self: center;

        p {
          font-size: 14px;
          line-height: 20px;
        }

        span {
          font-size: 12px;
          line-height: 20px;
          color: #999;
          padding-right: 10px;
        }
      }

      .btn1 {
        align-self: center;
        width: 70px;
        height: 30px;
        border: none;
        border-radius: 15px;
        background-color: rgba(102, 110, 232, 1);
        color: #fff;

        i {
          font-size: 12px;
          padding: 0 5px 0 0;
        }
      }

      .btn2 {
        align-self: center;
        width: 70px;
        height: 30px;
        border: none;
        border-radius: 15px;
        color: #c4bfbf;
        background-color: #cccccc49;
      }
    }

    .works_wrap {
      width: 335px;
      overflow-x: auto;
    }

    .works {
      height: 259px;
      display: flex;

      .works_item {
        margin-right: 5px;
        line-height: 20px;

        p {
          font-size: 14px;
        }

        span {
          font-size: 12px;
          padding-right: 5px;
          color: #999;
        }
      }
    }
  }

  .content {
    .food {
      h3 {
        padding: 20px 0;
        font-size: 18px;
        border-bottom: 1px solid #cccccc6d;
      }

      div {
        display: flex;
        justify-content: space-between;
        padding: 15px 0;
        border-bottom: 1px solid #cccccc6d;
      }
    }

    .buzhouContent {
      padding-top: 10px;

      .buzhou {
        border-bottom: 1px solid #cccccc6d;
        padding-bottom: 20px;

        h3 {
          font-size: 18px;
          padding: 20px 0;
        }

        img {
          width: 100%;
          margin-bottom: 20px;
        }

        p {
          font-size: 14px;
          line-height: 26px;
        }

        div {
          font-size: 12px;
          color: #ccc;
          padding-top: 20px;

          span {
            &:last-child {
              padding-left: 10px;
            }
          }
        }
      }
    }

    .discuss {
      padding: 20px 0;

      h3 {
        font-size: 18px;
        padding: 10px 0;
      }

      .user-me {
        display: flex;
        padding: 20px 0;

        input {
          width: 80%;
          margin-left: 10px;
          border: none;
          background-color: rgba(242, 242, 242, 0.509803921568627);
          padding-left: 20px;
          border-radius: 20px;

          &::placeholder {
            color: #999;
            font-size: 14px;
          }
        }
      }

      .user {
        .info {
          display: flex;
          justify-content: space-between;

          .left {
            display: flex;

            div {
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              padding-left: 10px;

              p {
                font-size: 14px;
                color: #999;
              }
            }
          }

          .right {
            font-size: 14px;
            color: #999;
            align-self: center;
          }
        }

        .text {
          font-size: 14px;
          padding: 10px 40px;
        }
      }
    }
  }
}

.head {
  width: 100%;
  height: 80px;
  text-align: center;
  border-bottom: 1px solid #cccccc6e;

  h3 {
    font-size: 16px;
    font-weight: 550;
    padding-top: 30px;
  }

  p {
    padding-top: 10px;
    font-size: 12px;
    color: #cccccc;
  }
}

.collect {
  .collect-item {
    display: flex;
    // height: 50px;
    line-height: 30px;
    padding: 20px;
    border-bottom: 1px solid #cccccc3a;

    img {
      width: 30px;
      height: 30px;
    }

    p {
      padding-left: 20px;
      font-size: 14px;
    }
  }
}
</style>
